<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_gouwuche.css" type="text/css"/>
<%--    <link rel="stylesheet" href="render/css/frontend/HFAlert.css">--%>

    <style type="text/css">
        img.my_select {
            position: relative;
            bottom: -2px;
            /* vertical-align: middle; */
            cursor: pointer;
            right: 98px;
        }

        span.myselect {
            position: relative;
            right: 91px;
        }

        img.select-img.select-bootom {
            position: relative;
            bottom: 22px;
            right: 16px;
        }
    </style>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<!-- Header End -->

<!-- 购物车 Body -->
<!-- 购物车 Body -->
<div class="my_body">
    <div class="shop_hd_breadcrumb">
        <strong>当前位置：</strong>
        <span>
            <a href="/">首页</a>&nbsp;›&nbsp;
            <a href="/render/myhome">个人中心</a>&nbsp;›&nbsp;
            <a href="javascript:void(0);">确认购物清单</a>
        </span>
    </div>
    <div class="clear"></div>

    <div class="shop_gwc_bd clearfix">
        <!-- 在具体实现的时候，根据情况选择其中一种情况 -->
        <!-- 购物车为空 -->
        <c:if test="${empty cart}">
            <div class="empty_cart mb10">
                <div class="message">
                    <p>购物车内暂时没有商品，您可以<a href="/">去首页</a>挑选喜欢的商品</p>
                </div>
            </div>
        </c:if>
        <!-- 购物车为空 end-->

        <!-- 购物车有商品 -->
        <div class="shop_gwc_bd_contents clearfix">
            <!-- 购物流程导航 -->
            <div class="shop_gwc_bd_contents_lc clearfix">
                <ul>
                    <li class="step_a hover_a">确认购物清单</li>
                    <li class="step_b">确认收货人资料及送货方式</li>
                    <li class="step_c">购买完成</li>
                </ul>
            </div>
            <!-- 购物流程导航 End -->

            <!-- 购物车列表 -->
            <c:if test="${!empty cart}">
                <div class="createOrder_start">
                    <table class="cart-list">
                        <thead>
                        <tr>
                            <th colspan="2">
                                <img src="render/images/noselect.png" class="select-img my_select select-all" select="false">
                                <span class="myselect">全选</span>
                                <span>商品</span>
                            </th>
                            <th class="price-per"><span>单价(元)</span></th>
                            <th><span>数量</span></th>
                            <th><span>小计</span></th>
                            <th><span>操作</span></th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${cart}" var="entry">
                            <%--stock 库存，buy 购买数量，price-per 价格，ciid  订单id--%>
                            <tr select="false"  stock="${entry.product.stock}" buy="${entry.quantity}"
                                price-per="${entry.product.price}" ciid="${entry.id}" >
                                <td class="gwc_list_pic">
                                    <img src="render/images/noselect.png" class="select-img select-bootom">
                                    <a href="javascript:void(0);">
                                        <img style="width: 60px;height: 60px" src="${entry.product.main_image}"/>
                                    </a>
                                </td>
                                <td class="gwc_list_title">
                                    <a href="javascript:void(0);">${entry.product.name}</a>
                                </td>
                                <td class="gwc_list_danjia">
                                    <span>￥<strong id="danjia_001">${entry.product.price}</strong></span>
                                </td>
                                <td class="gwc_list_shuliang">
                            <span>
                                <a href="javascript:void(0);" did="danjia_001" xid="xiaoji_001" ty="-"
                                   class="cart-decrease good_num_jian this_good_nums cart-change-button" valId="goods_001">-</a>
                                <input type="text" value="${entry.quantity}" id="goods_001" class="good_nums item-num-input"/>
                                <a href="javascript:void(0);" did="danjia_001" xid="xiaoji_001" ty="+"
                                   class="cart-increase good_num_jia this_good_nums cart-change-button" valId="goods_001">+</a>
                            </span>
                                </td>
                                <td class="gwc_list_xiaoji">
                                <span>
                                    <strong id="xiaoji_001" class="good_xiaojis cart-item-sum">￥${entry.product.price*entry.quantity}</strong>
                                </span>
                                </td>
                                <td class="gwc_list_caozuo">
                                        <%--                                <a style="margin: 0px" href="javascript:void(0);" onclick="postBody('/render/cart/deleteCart/id=${entry.id}');">收藏</a>   &lt;%&ndash;class="shop_good_delete"&ndash;%&gt;--%>
                                    <a style="margin-left: 5px" href="javascript:void(0);" onclick="deleteCart('/render/cart/deleteCart?id=${entry.id}');">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="6">
                                <div class="gwc_foot_zongjia">
                                    <span>已选商品<span class="cart-num">0</span>件</span>
                                    商品总价(不含运费)<span>￥<strong id="good_zongjia" class="cart-sum-price">0.00</strong></span>
                                </div>
                                <div class="clear"></div>
                                <div class="gwc_foot_links">
                                    <a href="#" id="gwc_foot_links_href" style="display:none;"><span id="gwc_foot_links_btn"></span></a>
                                    <a href="/" class="go">继续购物</a>
                                    <c:if test="${!empty cart}">
                                        <a href="javascript:void(0);" onclick="crateOrder();" class="op crate-order submitBtn">确认并填写订单</a>
                                    </c:if>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </c:if>
            <!-- 购物车列表 End -->
        </div>
        <!-- 购物车有商品 end -->
    </div>
</div>
<!-- 购物车 Body End -->

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>
<!-- Footer End -->
<%--<script type="text/javascript" src="render/js/frontend/jquery_goodnums.js"></script>--%>
<%--<script type="text/javascript" src="render/js/frontend/shop_gouwuche.js"></script>--%>
<%--<script type="text/javascript" src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.js"></script>--%>
<script type="text/javascript" src="render/js/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        var deleteCiid = 0;

        // 选择性打钩
        $("table.cart-list tbody .select-img").click(function () {
            changeSelect($(this).parents("tr"));//选择框、颜色发生变化
            sumUpdate();//结算更新
        });

        //如果已经勾选了，那就取消，否则反之。
        function changeSelect(tr) {
            //传入一个jquery-tr元素，修改它的选择属性
            if ($(tr).attr("select") === "false") {
                $(tr).find("td img.select-img").attr("src", "render/images/select.png");
                $(tr).attr("select", "true");
                $(tr).css("background-color", "#FFF8E1");
            } else if ($(tr).attr("select") === "true") {
                $(tr).find("td img.select-img").attr("src", "render/images/noselect.png");
                $(tr).attr("select", "false");
                $(tr).css("background-color", "#fff");
            }
        }

        // 计算
        function sumUpdate() {
            //结算更新器，更新按钮颜色 已选商品数量 更新全选按钮，单品总价也更新
            var result = calculate($("table.cart-list"));
            //已选择多少   已选商品
            $(".cart-num").text(result[0]);
            $(".cart-sum-price").text(result[1]);
            //如果没选满
            if (result[0] === 0) {
                $(".crate-order").css({"background-color": "#aaa", "cursor": "not-allowed"});
            } else {
                $(".crate-order").css({"background-color": "#FF0036", "cursor": "pointer"});
            }
            //如果全部选满
            if (result[2]) {
                $(".select-all").attr("src", "render/images/select.png");
            } else {
                $(".select-all").attr("src", "render/images/noselect.png");
            }
        }

        //计算总量
        function calculate(table) {
            //传入一个jquery-table元素，计算已选件数和总价
            var selectNum = 0;
            var sumPrice = 0;
            var allSelected = true;
            $(table).find("tr").each(function () {
                if (!isNaN(Number($(this).attr("price-per")))) {
                    if ($(this).attr("select") === "true") {
                        selectNum += Number($(this).attr("buy"));
                        sumPrice += Number($(this).attr("buy")) * Number($(this).attr("price-per"));
                    } else {
                        allSelected = false;
                    }
                }
            });
            return [selectNum, sumPrice.toFixed(2), allSelected];
        }

        // 全选
        $(".select-all").click(function () {
            if ($(this).attr("select") === "false") {
                console.log("111111111");
                $(this).attr("select", "true");
                //如果点击的时候全选是空的，那么现在要全选
                $("table.cart-list tbody tr").each(function () {
                    //先全不选
                    $(this).attr("select", "false");
                    //再反选上色
                    changeSelect($(this));
                });
                $(".select-all").attr("src", "render/images/select.png");
            } else if ($(this).attr("select") === "true") {
                $(this).attr("select", "false");
                $("table.cart-list tbody tr").each(function () {
                    //先全选
                    $(this).attr("select", "true");
                    //再反选上色
                    changeSelect($(this));
                });
                $(".select-all").attr("src", "render/images/noselect.png");
            }
            sumUpdate();
        });


        $(".delete-button").click(function () {
            deleteCiid = $(this).attr("ciid");
            $("#confirmModal").modal('show');
        });

        // 删除
        $("#confirmDelete").click(function () {
            $("#confirmModal").modal("hide");
            var page = "deleteCartItem";
            $.get(page,{"id":deleteCiid},function (result) {
                if(result === "success"){
                    $("tr[ciid="+deleteCiid+"]").remove();
                    sumUpdate();
                }else{
                    alert("服务器错误，删除失败");
                }
            });
        });

        $("#cancelDelete").click(function () {
            $("#confirmModal").modal("hide");
        });

        // 增减数量----  stock="1" buy = "2" price-per="3" ciid="4"
        $(".cart-change-button").click(function () {
            var tr = $(this).parents("tr");
            var stock = Number($(tr).attr("stock"));
            var pricePer = Number($(tr).attr("price-per"));
            var ciid = Number($(tr).attr("ciid"));
            var num = Number($(tr).find(".item-num-input").val());
            if (num < stock && $(this).attr("class").indexOf("in") > 0) {
                $(tr).find(".item-num-input").val(++num);
            } else if (num > 1 && $(this).attr("class").indexOf("de") > 0) {
                $(tr).find(".item-num-input").val(--num);
            }
            changeCartNum(num,ciid);
            $(tr).attr("buy", num);
            $(tr).find(".cart-item-sum").text("￥" + (pricePer * num).toFixed(2));
            sumUpdate();
        });

        //后台更新了，所以输入框也就更新-----value={item.number}
        function changeCartNum(num,ciid){
            //后台提交ajax修改数据库的商品数量
            $.ajax({
                url : '/render/cart/changeCartNum?ciid='+ciid+'&num='+num,
                type : "post",
                success : function(data) {
                    if(data.success){
                        return false;
                    }
                    return true;
                }
            });
        }
    })
</script>
<script type="text/javascript">
    function deleteCart(s) {
        HFconfirm({type:'success',title:'确认删除？',confirmButtonText: '确定', cancelButtonText: '取消', width: 400,callback:function () {
            $.ajax({
                url : s,
                type : "post",
                success : function(data) {
                    if (data.success) {
                        // $(this).parents("tr").remove();
                        window.location.reload();
                    }else{
                        HFalert({title:'删除失败',type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        }});
    }

    function crateOrder() {
        var arr = new Array();
        var index=0;

        $("table.cart-list tbody tr").each(function () {
            if ($(this).attr("select") === "true") {
                arr[index++]=$(this).attr("ciid");
            }
        });

        var flag=true;
        if (arr[0] == null) {
            HFalert({title:'请选择需要购买的商品',type: 'warning', confirmButtonText: '确定'});
            flag=false;
        }

        if (flag) {
            var $form = $(".createOrder_start");
            var url='/render/cart/buy?ciid='+arr;
            $("#gwc_foot_links_href").attr('href',url);
            $("#gwc_foot_links_btn").click();
            // $form.ajaxSubmit({
            //     type: 'get',
            //     url: url,
            //     success: function (data) {
            //         $(".my_body").empty();
            //         $(".my_body").html(data);
            //     }
            // });
        }
    }
</script>
</body>
</html>